<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>正奥能源油库管理</title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<style>
			html,
			body,
			div,
			span,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			p,
			a,
			img,
			ul,
			ol,
			li {
				margin: 0;
				padding: 0;
				border: 0;
				font-size: 16px;
				font: inherit;
				vertical-align: baseline;
			}

			html,
			body {
				height: 100%;
			}

			/* .el-tabs {
				height: 100%;
			}
 */
			/* .el-input__inner {
				width: 500px;
			}
 */
			[v-cloak] {
				display: none;
			}

			.mt15 {
				margin-top: 15px;
			}

			.w100 {
				width: 100%;
			}

			.form-data {
				margin-left: 30px;
				border: 1px solid #dcdfe6;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="top-query">
				<el-row>
					<el-col :span="4" style="margin-left: 30px;margin-right: 15px;">
						<el-select v-model="stationNumber" placeholder="请选择" class="w100">
							<el-option v-for="item in oilSelectList" :key="item.fueltankno"
								:label="item.energystationname" :value="item.energystationid"
								@click.native="handleChange(item)">
							</el-option>
						</el-select>
					</el-col>
					<el-col :span="4" style="margin-bottom: 15px;">
						<el-button type="primary" @click='tankSelectList'>查询</el-button>
					</el-col>
				</el-row>
			</div>

			<div class="oiltank-scale">
				<el-form :model="form" ref="form" :rules="rules">
					<div class="form-data">
						<el-row v-for="(item, index) in form.oliinfo" :key="index" :gutter="20">
							<el-col :span="7">
								<el-form-item label="罐号:" label-width="60px" :prop="'oliinfo.' + index + '.tankNumber'"
									:rules="rules.tankNumber">
									<el-input placeholder="请输入罐号" v-model.trim="item.tankNumber"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="百分比:" label-width="70px" :prop="'oliinfo.' + index + '.percent'"
									:rules="rules.percent">
									<el-input placeholder="请输入百分比" v-model.trim="item.percent">
										<template slot="append">%</template>
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="±:" label-width="60px" :prop="'oliinfo.' + index + '.buoyancy'"
									:rules="rules.buoyancy">
									<el-input placeholder="请输入内容" v-model.trim="item.buoyancy"></el-input>
								</el-form-item>
							</el-col>
							<el-button type="warning" icon="el-icon-minus" circle style="font-size: 12px;"
								@click="delRow(index)" :disabled="index <= 3"></el-button>
						</el-row>
						<div style="text-align: center;">
							<el-button type="primary" @click="addRow">新增一行</el-button>
							<el-button type="primary" @click="btnSave">保存</el-button>
						</div>
					</div>
				</el-form>

			</div>

		</div>

		<script src="../js/vue.min.js"></script>
		<script src="../js/axios.js"></script>
		<script src="../js/element.lib.js"></script>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						// 油站下拉
						oilSelectList: [],
						//油站
						stationNumber: '',
						energystationid: '',
						stationName: '',
						form: {
							oliinfo: [{
								tankNumber: '',
								percent: '',
								buoyancy: '',
							}]
						},
						rules: {
							tankNumber: [{
								required: true,
								message: "请输入罐号",
								trigger: "axis"
							}, {
								validator: this.validatePositiveInteger,
								trigger: 'blur'
							}],
							percent: [{
								required: true,
								message: "请输入百分比",
								trigger: "axis"
							}, {
								validator: this.validateInputNumber,
								trigger: 'blur'
							}],
							buoyancy: [{ 
								required: true,
								message: "请输入",
								trigger: "axis"
							}, {
								validator: this.validateInputNumber,
								trigger: 'blur'
							}],
						},
					}
				},
				created() {
					// const token = localStorage.getItem('token')
					// if(!token) {
					// 	window.location.href = './login/index.html'
					// }
					this.initToken()
					this.initBaseUrl()
				},
				mounted() {
					this.getOilselect()
				},
				methods: {
					// 初始化token 数据
					initToken() {
						const token = localStorage.getItem('token')
						axios.defaults.headers.common['Authorization'] = token // 改写axios 源码，初始化的时候往里面写入token
					},
					//初始化接口前缀 便于修改
					initBaseUrl() {
							axios.defaults.baseURL = 'http://192.168.3.30:8799'
						},
					// 油站下拉列表
					getOilselect() {
						axios.get('/ec/stationBaseInfo/queryStationList')
							.then(response => {
								this.oilSelectList = response.data;
							})
							.catch(error => {
								// 请求失败，处理错误
								console.error('Error fetching station list:', error);
							})
					},
					handleChange(item) {
						this.energystationid = item.energystationid
						this.stationName = item.energystationname
					},
					// 油罐数据
					tankSelectList() {
						if (this.energystationid !== '') {
							// 发起 GET 请求获取站点列表
							axios.get(
									`/ec/stationBaseInfo/queryFueltank/${this.energystationid}`)
								.then(response => {
									let oliData = response.data;
									const data = oliData.map(item => {
										return {
											stationNumber: this.energystationid,
											tankNumber: item.fueltankno,
										};
									});
									this.getOliInfo(data);
								})
								.catch(error => {
									// 请求失败，处理错误
									console.error('Error fetching station list:', error);
								})
						} else {
							this.$message({
								message: '请选择油站',
								type: 'warning'
							});
						}
					},
					getOliInfo(data) {
						const url = '/ec/ecScaleSet/queryByCondition';
						axios.post(url, data)
							.then(response => {
								if (response.data.code == 200) {
									this.form.oliinfo = response.data.list
								}
								else if (response.data.code == 401) {
									this.$message({
										message: response.data.msg,
										type: 'error'
									});
								}
							})
							.catch(error => {

							});
					},
					addRow() {
						this.form.oliinfo.push({
							tankName: '',
							percent: '',
							buoyancy: '',
						})
					},
					delRow(index) {
						if (this.form.oliinfo.length > 1) {
							this.form.oliinfo.splice(index, 1)
						}
					},
					btnSave() {
						this.$refs.form.validate((valid) => {
							if (valid) {
								const data = this.form.oliinfo.map(item => {
									return {
										id: item.id,
										stationNumber: this.energystationid,
										stationName: this.stationName,
										tankNumber: item.tankNumber,
										tankName: `${item.tankNumber}号罐`,
										percent: item.percent,
										buoyancy: item.buoyancy,
									};
								});
								console.log(data, '444444444444444')
								const url = '/ec/ecScaleSet/addOrUpdate';
								axios.post(url, data)
									.then(response => {
										if (response.data.code == 200) {
											this.$message({
												message: '数据更新完成',
												type: 'success'
											});
											this.tankSelectList()
										}
										else if (response.data.code == 401) {
											this.$message({
												message: response.data.msg,
												type: 'error'
											});
										}
									})
									.catch(error => {

									});
							} else {
								return false;
							}
						});
					},
					validateInputNumber(rule, value, callback) {
						if (!/^\d+(\.\d)?$/.test(value)) {
							callback(new Error('只能输入数字且最多保留一位小数'));
						} else {
							callback();
						}
					},
					validatePositiveInteger(rule, value, callback) {
					  if (!/^[1-9]\d*$/.test(value)) {
					    callback(new Error('只能输入正整数'));
					  } else {
					    callback();
					  }
					}
				},
			});
		</script>	
	</body>
</html>